<template>
    <div class="details wrap">
        <!-- <Crumb :navs="nav"></Crumb> -->
        <main>
            <div class="content">
                <div class="l">
                    <div class="bigImg">
                        <img :src="'http://sc.wolfcode.cn' + productInfo.coverImg" style="width: 100%;height:100%"
                            alt="" />
                    </div>
                    <ul>
                        <li v-for="(item, index) in productInfo.imgAltas" :key="index"
                            @mouseenter="imgTabFn(item.src, index)">
                            <img :src="'http://sc.wolfcode.cn' + item.src" width="100" height="100" alt="" :style="{
                                filter:
                                    index == imgTabIndex
                                        ? 'brightness(100%)'
                                        : 'brightness(50%)',
                            }" />
                        </li>
                    </ul>
                </div>
                <div class="r">
                    <div class="top">
                        <h2>{{ productInfo.seriesTitle }}</h2>
                        <p>{{ productInfo.seriesSubTitle }}</p>
                        <div class="score">{{ productInfo.coin }}积分</div>
                    </div>
                    <div class="down">
                        <section v-for="(item, index) in productInfo.parameterJson" :key="index">
                            <strong>{{ item.title }}</strong>
                            <ul>
                                <!-- currentActivate:当前是否激活状态 true为选中状态 false为未选中 -->
                                <!-- 循环每个选择下的[选项]内容 -->
                                <li :class="{ active: citem.currentActivate }" v-for="citem in item.parameters"
                                    :key="citem.id" @click="youCanBuyFn(citem.id)">
                                    {{ citem.title }}
                                </li>
                                <!-- <li>黄色</li> -->
                            </ul>
                        </section>
                        <div style="margin: 10px 0">
                            <strong>数量 <span>*礼品库存{{ productInfo.stock }}件</span></strong>
                            <div class="step">
                                <div class="reduce" @click="stepFn(-1)">-</div>
                                <input type="text" disabled v-model="stepNum" />
                                <div class="add" @click="stepFn(1)">+</div>
                            </div>
                        </div>
                        <div class="btns">
                            <div class="addToCart" @click="JrGwc()">加入购物车</div>
                            <div class="buyNow">立即购买</div>
                        </div>
                    </div>
                </div>
            </div>
            <aside>
                <h3>你还可以兑换</h3>
                <ul>
                    <li v-for="(item, index) in themYouCanBuy" :key="index" @click="youCanBuyFn(item.id)">
                        <div class="l">
                            <img :src="'http://sc.wolfcode.cn' + item.img" alt="" />
                        </div>
                        <div class="r">
                            <div class="title">{{ item.name }}</div>
                            <div class="score">
                                <span>{{ item.coin }}</span>
                                积分
                            </div>
                        </div>
                    </li>
                </ul>
            </aside>
        </main>
        <ul class="tabs">
            <li :class="{ active: !isShow }" @click="isShow = false">礼品详情</li>
            <li :class="{ active: isShow }" @click="isShow = true">常见问题</li>
        </ul>
        <div a>
            <pre data-type="js">
        <code v-show="!isShow" v-html="productInfo.description"/>
        </pre>
        </div>
        <!-- 商品详情的内容盒子 -->

        <div class="issue" v-show="isShow">
            <!-- 常见问题的内容盒子 -->
            <h4>兑换后运费如何收取？</h4>
            <p>
                商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
            </p>
            <p class="mb20">
                （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
            </p>
            <h4>如何申请退换货？</h4>
            <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
            <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
            <p>
                因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；
            </p>
            <p>
                如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；
            </p>
            <p class="mb20">
                如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。
            </p>
            <h4>如何开具发票？</h4>
            <p>叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。</p>
            <h4>关于鸡腿价格问题</h4>
            <p class="mb20">
                因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。
            </p>
            <h4>联系我们</h4>
            <p>www.wolfcode.cn</p>
            <p class="mb20">微信公众号搜索“叩丁狼”</p>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { AddShopAPI, GoodsDetailsAPI } from '@/request/api';
import router from '@/router';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from "@/store/user"
const store = useStore()
const route = useRoute()
const productInfo = ref<ProductInfo>({} as any)
const themYouCanBuy = ref<ThemYouCanBuy[]>([])
const isShow = ref(false)
const imgTabIndex = ref(0)
const stepNum = ref(1)


const getProductInfo = (id: number) => {
    GoodsDetailsAPI(id).then(res => {
        if (res.code === 0) {
            productInfo.value = res.data.productInfo
            themYouCanBuy.value = res.data.themYouCanBuy

            productInfo.value.coverImg = productInfo.value.imgAltas[0].src;
            imgTabIndex.value = 0;

            productInfo.value.description = productInfo.value.description.replaceAll(
                "upload/",
                'http://sc.wolfcode.cn' + "/upload/"
            );
        }
    })

}
getProductInfo(parseInt(route.query.id as string))


const imgTabFn = (src: string, index: number) => {
    productInfo.value.coverImg = src;
    imgTabIndex.value = index;
}
const stepFn = (val: number) => {
    if (val == -1 && stepNum.value == 1) {
        return;
    }
    stepNum.value += val;
}
const youCanBuyFn = (inId: number) => {
    router.push(`/details?id=${inId}`); // 页面地址会变化
    getProductInfo(inId)

}

// 加入购物车
const JrGwc = () => {
    AddShopAPI({
        productId: productInfo.value.id,
        total: stepNum.value,
        // modified: 1,
    }).then(res => {
        if (res.code === 0) {
            ElMessage.success('添加成功,请至购物车查看!')
            store.registerUser();
        }
    })
}
</script>

<style scoped lang="less">
@import "@/assets/css/public.less";

.details {
    main {
        margin-bottom: 52px;
        display: flex;

        .content {
            width: 884px;
            display: flex;
            justify-content: space-between;

            .l {
                .bigImg {
                    width: 459px;
                    height: 440px;
                    background-color: #fcf;
                    margin-bottom: 21px;
                }

                ul {
                    width: 459px;
                    display: flex;
                    justify-content: space-between;

                    li {
                        width: 100px;
                        height: 100px;
                        background-color: #cff;
                        cursor: pointer;

                        img {
                            filter: brightness(50%);
                        }

                        &:hover {
                            img {
                                filter: brightness(100%);
                            }
                        }
                    }
                }
            }

            .r {
                padding: 7px 49px 0 31px;

                .top {
                    padding-bottom: 23px;
                    border-bottom: 1px solid #ececec;

                    h2 {
                        font-size: 28px;
                        color: #000000;
                    }

                    p {
                        margin-top: 15px;
                        font-size: 14px;
                        font-weight: 300;
                        color: #999999;
                    }

                    .score {
                        font-size: 28px;
                        font-weight: bold;
                        color: #fd604d;
                        margin-top: 26px;
                    }
                }

                .down {
                    padding-top: 19px;

                    strong {
                        font-weight: 300;
                        color: #000000;
                        margin-bottom: 14px;
                        display: block;

                        span {
                            color: #666;
                            font-size: 14px;
                        }
                    }

                    ul {
                        width: 100%;
                        overflow: hidden;

                        li {
                            padding: 5px 10px;
                            cursor: pointer;
                            height: 32px;
                            float: left;
                            text-align: center;
                            line-height: 32px;
                            color: #666666;
                            border: 1px solid #d1d1d1;
                            margin-right: 20px;
                            margin-bottom: 11px;

                            &.active {
                                border-color: @base-color;
                                color: @base-color;
                            }
                        }
                    }

                    .step {
                        background: #fff;
                        width: 106px;
                        margin-bottom: 24px;
                        height: 32px;
                        display: flex;
                        justify-content: space-between;

                        .reduce,
                        .add {
                            width: 30px;
                            text-align: center;
                            line-height: 32px;
                            height: 32px;
                            cursor: pointer;
                            box-sizing: border-box;
                            border: 1px solid #ccc;
                            user-select: none;
                        }

                        input {
                            width: 46px;
                            height: 32px;
                            user-select: none;
                            border: 0;
                            box-sizing: border-box;
                            border-top: 1px solid #ccc;
                            padding: 0;
                            text-indent: 1.5em;
                            outline: none;
                            border-bottom: 1px solid #ccc;
                        }
                    }

                    .btns {
                        display: flex;
                        margin-bottom: 25px;

                        div {
                            width: 150px;
                            height: 46px;
                            line-height: 46px;
                            text-align: center;
                            margin-right: 19px;
                            cursor: pointer;
                            color: #fff;

                            &.addToCart {
                                background: #3dc36b;
                            }

                            &.buyNow {
                                background: #fd604d;
                            }
                        }
                    }

                    .love_share {
                        display: flex;

                        .love {
                            display: flex;
                            align-items: center;
                            padding-right: 16px;
                            border-right: 1px solid #666;

                            img {
                                margin-right: 12px;
                            }

                            span {
                                color: #666666;
                            }
                        }

                        .share {
                            padding-left: 18px;
                        }
                    }
                }
            }
        }

        aside {
            padding-left: 19px;
            box-sizing: border-box;
            width: 230px;
            border-left: 1px solid #ddd;

            h3 {
                font-size: 18px;
                color: #333333;
                margin-bottom: 20px;
            }

            ul {
                li {
                    margin-bottom: 30px;
                    display: flex;
                    cursor: pointer;
                    justify-content: space-between;

                    .l {
                        width: 80px;
                        height: 80px;
                        margin-right: 10px;

                        /* background-color: #ffc; */
                        img {
                            width: 100%;
                            display: block;
                            border: 1px solid transparent;
                        }
                    }

                    .r {
                        width: 140px;
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;

                        .title {
                            /* 超出一行变省略号 */
                            text-overflow: ellipsis;
                            width: 100%;
                            font-weight: bold;
                            overflow: hidden;
                            white-space: nowrap;
                            font-size: 14px;
                            color: #666666;
                        }

                        .score {
                            color: #666666;

                            span {
                                font-weight: bold;
                                font-size: 18px;
                                color: #ff5e0f;
                            }
                        }
                    }

                    &:hover {
                        img {
                            border: 1px solid @base-color;
                        }

                        .title {
                            color: @base-color;
                        }
                    }
                }
            }
        }
    }

    .tabs {
        border-top: 1px solid #ececec;
        display: flex;
        width: 100%;
        margin-bottom: 27px;

        li {
            width: 120px;
            height: 50px;
            cursor: pointer;
            background: #fff;
            text-align: center;
            line-height: 50px;

            &.active {
                background: #ececec;
                font-weight: bold;
            }
        }
    }

    .issue {
        padding-bottom: 40px;

        h4 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 20px;
        }

        p {
            line-height: 1.4em;
        }
    }
}
</style>
